export default class Paga{

    constructor(data , options ){
        // 创建默认参数; 
        Object.assign(this , {
              // 一页默认显示十条数据; 
              show_num : 10 ,
              // 当前的页码 ; 
              index : 0 ,
              // 分页内容总条数; 
              count : data.length ,
              // 中间显示的页码数量; 
              show_page_count : 5 

        } , options )
        this.data = data;
        this.container = document.getElementById("goodList")
        console.log(this.container);
        this.pagination = document.querySelector(".pagination");
        // 计算总页数;
        this.total_page_num = Math.ceil(  this.count / this.show_num);
        // show_page_count 数据必须是奇数;
        if( this.show_page_count % 2 !== 1 ){
              this.show_page_count ++;
        }


        this.render()
        this.renderBullet();
        this.bindEvent();
  }


renderBullet(){
    //创建结构的核心在于，当前页面有多少条数据; 
                        // - 总页数计算方式 : 总数量 / 每页显示数量 向上取整  
                        let html = "";

                        html += "<em class='prev'>上一页</em>"
                        html += "<strong class='start'>开头</strong>"

                        // start : 页码的起始点; 
                        // end   : 页码的终点; 

                        let start = this.index - 1;
                        let end   = this.index + 3; 

                        
                        // - 判定分页的起始点; 
                        if( this.index <= 2 ){
                              start = 1; 
                              end = start + this.show_page_count;
                        }
                        
                        //  this.total_page_num > this.show_page_count + 1  && this.index   : 
                        if( this.total_page_num > this.show_page_count + 1  && this.index  >= this.total_page_num - 2){
                              end = this.total_page_num ; 
                              start = end - 5 ;
                        }     

                        // - end 极值判断; 
                        // - end 的最大值不能超过页码总数; 

                        if( end >= this.total_page_num ){
                              end = this.total_page_num ; 
                        }
                        if(!( this.total_page_num > this.show_page_count + 1 )){
                              start = 1; 
                        }
                       
                        if(  this.total_page_num > this.show_page_count + 1 && this.index >= 3 ){
                              html += "<span>1</span>"
                              html += "<span>...</span>"
                        }

                        // 带有省略号的渲染; 
                        for(let i = start ; i <= end ; i ++){
                              html += `<span ${ i - 1 === this.index ? "class='active'" : ""}>${ i }</span>`
                        }
                        
                        if( this.total_page_num > this.show_page_count + 1  && this.index <= this.total_page_num - 4){
                              html += "<span>...</span>"
                              html += "<span>" + this.total_page_num + "</span>"
                        }

                        html += "<strong class='end'>结尾</strong>"
                        html += "<em class='next'>下一页</em>"

                        this.pagination.innerHTML = html;
}
spanHandler(e) {
    console.log(e.target);
    this.index = e.target.textContent - 1;
    
    // this.index = e.origin.textContent - 1;
    this.render();
    // debugger
    this.renderBullet();
    // location.reload(false);
    this.bindEvent();
}
startHandler(e) {
    this.index = 0;
    this.render();
    this.renderBullet();
    this.bindEvent();

}
endHandler(e) {
    this.index = this.total_page_num - 1;
    this.render();
    this.renderBullet();
    this.bindEvent();

}
nextHandler(e) {
    this.add();
  

}
prevHandler(e) {
    this.reduce();
  
}
selectstartHandler(){
    e.preventDefault();
}
add() {
    if (this.index >= this.total_page_num - 1) {
        return false;
    }
    this.index++
    this.render();
    this.renderBullet();
    this.bindEvent();
}
reduce() {
    if (this.index <= 0) {
        return false;
    }
    this.index--
    this.render();
    this.renderBullet();
    this.bindEvent();
}


// selectstartHandler() {
//     this.index = e.target.text() - 1;
//     this.render();
//     this.renderBullet();
    

// }



render() {
    // this.renderGood = new Rendergood("goodList");
    // console.log(111);
    // this.renderGood.pfetch(0, 1);
    // this.renderGood.pfetch(0, 34);
    let html = "";
    // this.
    for (let i = this.index * this.show_num; i < (this.index + 1) * this.show_num; i++) {
        // 如果渲染的数据不存在，那么我们就略过本次拼接;
        if (this.data[i] === undefined) continue;
        html += `<ul class="lis">
          <li class="border" >
              <a rel="nofollow" href="./details.html#id=${this.data[i].proID}" >
                  <img src="${this.data[i].src}">
                  <div class="proinfo">
                      <div class="row" style="flex-wrap: wrap; overflow: hidden; height: 26px;">
                          <strong class="price">￥${this.data[i].price}</strong>
                          <span class="targ">直降${this.data[i].no_price - this.data[i].price}元</span>
                          <span class="targ">包邮</span>
                          <span class="targ">货到付款</span>
                      </div>
                      <h3>${this.data[i].title}</h3>
                      <div class="num">
                          <span>${this.data[i].no_price * 10}个好评</span>
                      </div>
                  </div>
              </a>
              <div class="inner"></div>
          </li>
      </ul>`
    }
    this.container.innerHTML = html

}
bindEvent(){
    this.span = document.querySelectorAll(".pagination span")
    this.start = document.querySelector(".pagination .start")
    this.end = document.querySelector(".pagination .end")
    this.next = document.querySelector(".pagination .next")
    this.prev = document.querySelector(".pagination .prev")
    // this.span=addEventListener
    console.log(this.span);
    
    this.span.forEach(item=>{
        console.log(item);
        // debugger
        item.addEventListener("click", e => this.spanHandler(e))

    })
 
    this.start.addEventListener("click", e => this.startHandler(e))
    this.end.addEventListener("click", e => this.endHandler(e))
    this.next.addEventListener("click", e => this.nextHandler(e))
    this.prev.addEventListener("click", e => this.prevHandler(e))
    
    // this.pagination.addEventListener("click", e => this.selectstartHandler(e))
}




}